<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../../src/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-lg-10">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">重置密码</h4>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <div class="stepwizard mt-4">
                                <div class="stepwizard-row setup-panel">
                                    <div id="user" class="wizard-step active">
                                        <a href="#user-detail" class="active btn" style="padding: 18px">
                                            <i class="ri-lock-unlock-line text-primary"></i><span>账户</span>
                                        </a>
                                    </div>
                                    <div id="document" class="wizard-step">
                                        <a href="#document-detail" class="btn btn-default disabled"
                                           style="padding: 18px">
                                            <i class="ri-user-fill text-danger"></i><span>个人</span>
                                        </a>
                                    </div>
                                    <div id="confirm" class="wizard-step">
                                        <a href="#cpnfirm-data" class="btn btn-default disabled" style="padding: 18px">
                                            <i class="ri-check-fill text-warning"></i><span>完成</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <form class="form">
                                <div class="row setup-content" id="user-detail">
                                    <div class="col-sm-12">
                                        <div class="col-md-12 p-0">
                                            <h3 class="mb-4">用户信息:</h3>
                                            <div class="row">
                                                <div class="form-group col-md-6">
                                                    <label class="control-label">用户名: *</label>
                                                    <input maxlength="12" type="text" required="required" id="username"
                                                           class="form-control" placeholder="UserName"
                                                           data-trigger="hover" data-container="body"
                                                           data-toggle="popover"
                                                           data-placement="bottom"
                                                           data-content="用户名长度为4～18个字符、只能以字母开头、数字、点、减号或下划线组成"/>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label class="control-label">新密码: *</label>
                                                    <input maxlength="12" type="password" required="required"
                                                           id="password"
                                                           class="form-control" placeholder="Password"
                                                           data-trigger="hover" data-container="body"
                                                           data-toggle="popover"
                                                           data-placement="bottom"
                                                           data-content="密码长度为4～10个字符、由任意字符组成"/>
                                                </div>
                                            </div>
                                            <button id="next" class="btn btn-primary btn-lg pull-right nextBtn"
                                                    type="button">
                                                下一个
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row setup-content" id="document-detail">
                                    <div class="col-sm-12">
                                        <div class="col-md-12 p-0">
                                            <h3 class="mb-4">个人信息:</h3>
                                            <div class="row">
                                                <div class="col-md-6 form-group">
                                                    <label for="name" class="control-label">名字: *</label>
                                                    <input maxlength="100" type="text" class="form-control"
                                                           required="required"
                                                           id="name" name="fname" placeholder="Name">
                                                </div>
                                                <div class="col-md-6 form-group">
                                                    <div class="form-group">
                                                        <label for="phone" class="control-label">联系电话:</label>
                                                        <input maxlength="11" type="text" class="form-control"
                                                               name="ccno" id="phone" placeholder="Phone"
                                                               required="required"
                                                               onkeyup="value=value.replace(/[^\d]/g,'')">
                                                    </div>
                                                </div>
                                            </div>
                                            <button id="next2" class="btn btn-primary nextBtn btn-lg pull-right"
                                                    type="button">
                                                下一个
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row setup-content" id="cpnfirm-data">
                                    <div class="col-sm-12">
                                        <div class="col-md-12 p-0">
                                            <h3 class="mb-4 text-left">状态:</h3>
                                            <div class="row justify-content-center">
                                                <div class="col-3">
                                                    <a id="status" href="../sign-in.html" data-trigger="hover"
                                                       data-container="body"
                                                       data-toggle="popover"
                                                       data-placement="bottom"
                                                       data-content="3秒后跳转到登录 如没有自动跳转请点击此处"> <img
                                                            src="../../src/images/page-img/img-success.png" class="fit-image"
                                                            alt="img-success" style="width: 50%;margin: 10px 80px;">
                                                    </a>
                                                    <h2 id="fail1" class="text-success text-center"><strong>成功!
                                                        即将跳转登录</strong></h2>
                                                    <h2 id="fail2" class="text-danger text-center"><strong>失败!
                                                        请检查信息</strong></h2>
                                                    <br/><br/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<footer class="bg-white iq-footer" style="margin-left: 0px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <ul class="list-inline mb-0">
                    <li class="list-inline-item"><a href="privacy-policy.html">隐私政策</a></li>
                    <li class="list-inline-item"><a href="terms-of-service.html">使用条款</a></li>
                </ul>
            </div>
            <div class="col-lg-6 text-right">
                版权所有2020 <a href="#">DaLao</a> 保留所有权利。
            </div>
        </div>
    </div>
</footer>
<!-- Footer END --><!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../../src/js/jquery.min.js"></script>
<script src="../../src/js/popper.min.js"></script>
<script src="../../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../../src/js/waypoints.min.js"></script>
<script src="../../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../../src/js/custom.js"></script>
<script>

    //样式方法
    function cssStyle(object, styleName, styleValue) {
        object.css(styleName, styleValue);
    }

    $("#next").click(function () {

        let username = $("#username");
        let password = $("#password");
        let name = $("#name");
        let phone = $("#phone");

        let user = username.val();
        let pass = password.val();

        //用户名正则表达式验证
        var patten = /^[a-zA-Z]\w{3,15}$/ig;
        if (user === "") {
            username.prop("placeholder", "请输入用户名");
            cssStyle(username, "border", "1px solid #a94442");
        } else if (!patten.test(user)) {
            username.val("");
            username.prop("placeholder", "用户名不合法");
            cssStyle(username, "border", "1px solid #a94442");
        } else {
            username.prop("placeholder", "Username");
            cssStyle(username, "border", "");
        }
        //密码正则表达式验证
        var patten2 = /^\S{4,10}$/;
        if (pass === "") {
            password.prop("placeholder", "请输入密码");
            cssStyle(password, "border", "1px solid #a94442");
        } else if (!patten2.test(pass)) {
            password.val("");
            password.prop("placeholder", "密码不合法");
            cssStyle(password, "border", "1px solid #a94442");
        } else {
            password.prop("placeholder", "Password");
            cssStyle(password, "border", "");
        }
    });

    $("#next2").click(function () {

        let name = $("#name");
        let phone = $("#phone");
        let fname = name.val();
        let fphone = phone.val();

        //验证姓名
        let patten3 = /^[\u4e00-\u9fa5]{2,6}$/;
        if (fname === "") {
            name.prop("placeholder", "请输入名字");
            cssStyle(name, "border", "1px solid #a94442");
        } else if (!patten3.test(fname)) {
            name.val("");
            name.prop("placeholder", "名字不合法");
            cssStyle(name, "border", "1px solid #a94442");
        } else {
            name.prop("placeholder", "Name");
            cssStyle(name, "border", "");
        }
        //验证电话
        let patten4 = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (fphone === "") {
            phone.prop("placeholder", "请输入电话");
            cssStyle(phone, "border", "1px solid #a94442");
        } else if (!patten4.test(fphone)) {
            phone.val("");
            phone.prop("placeholder", "电话不合法");
            cssStyle(phone, "border", "1px solid #a94442");
        } else {
            phone.prop("placeholder", "Phone");
            cssStyle(phone, "border", "");
        }

        //显示错误信息
        function verification1() {
            $("#status").hide();
            $("#fail1").hide();
            $("#fail2").show();
        }

        //显示正确信息
        function verification2() {
            $("#fail2").hide();
            $("#status").show();
            $("#fail1").show();
        }

        let propUser = $("#username").prop("placeholder");
        let propPass = $("#password").prop("placeholder");
        let propName = name.prop("placeholder");
        let propPhone = phone.prop("placeholder");
        //验证账户名与密码
        if ((propUser !== "Username") || (propPass !== "Password") || (propName !== "Name") || (propPhone !== "Phone")) {
            console.log("运行")
            verification1();
        } else {
            verification2();
            $("head").append('<meta http-equiv="refresh" content="3;url=sign-in.html" />');
        }
    })
</script>
</body>
</html>